import React from 'react'
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
import {HashRouter as Router, Route, Link} from 'react-router-dom'
import 'antd/dist/antd.css'
import Loading from '../../components/Loading'



class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            collapsed: false,
        };
        this.toggle=this.toggle.bind(this)
    }
    toggle () {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }
    componentDidMount(){

    }
    render(){
        const element = (
        <Router>
            <div>
            <Layout>
                <Header className="header">
                    <div className="logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="1">nav 1</Menu.Item>
                        <Menu.Item key="2">nav 2</Menu.Item>
                        <Menu.Item key="3">nav 3</Menu.Item>
                    </Menu>
                </Header>
                <Content style={{ padding: '0 50px' }}>
                    <Breadcrumb style={{ margin: '12px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb>
                    <Layout style={{ padding: '24px 0', background: '#fff' }}>
                        <Sider width={200} style={{ background: '#fff' }}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%' }}
                            >
                                <SubMenu key="sub1" title={<span><Icon type="user" />任务管理</span>}>
                                    <Menu.Item key="1"><Link to='/test1'>上网设置</Link></Menu.Item>
                                    <Menu.Item key="2"><Link to='/test2'>WIFI设置</Link></Menu.Item>
                                    <Menu.Item key="3"><Link to='/test3'>高级设置</Link></Menu.Item>
                                    <Menu.Item key="4"><Link to='/test4'>关于</Link></Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                    <Menu.Item key="7">option7</Menu.Item>
                                    <Menu.Item key="8">option8</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
                                    <Menu.Item key="9">option9</Menu.Item>
                                    <Menu.Item key="10">option10</Menu.Item>
                                    <Menu.Item key="11">option11</Menu.Item>
                                    <Menu.Item key="12">option12</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Content style={{ padding: '0 24px', minHeight: 728 }}>
                            <Route exact path='/' component={test1}></Route>
                            <Route  path='/test1' component={test1}></Route>
                            <Route  path='/test2' component={test2}></Route>
                            <Route  path='/test3' component={test3}></Route>

                        </Content>
                    </Layout>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    IknowCrawler ©2017
                </Footer>
            </Layout>
            </div>
        </Router>
        )
        return element
    }

}
const test1=()=>{
    return <div ><Loading/></div>
}
const test2=()=><div>test2</div>
const test3=()=><div>test3</div>
const test4=()=><div>test4</div>

export default Home